<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .custom-textarea {
            display: block;
            width: 68%;
            height: 100vh;
            padding: 10px;
            font-family: Arial, sans-serif;
            font-size: 18px;
            line-height: 2;
            color: #333;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: vertical;
            margin: 0 auto;
        }

        .custom-textarea {
            text-indent: 2em; /* 设置首行缩进为2个字符的宽度，根据需要进行调整 */
        }

        .chapterNumber {
            width: 70%;
            height: 50px;
            margin: 25px auto;
            display: flex;
            justify-content: space-between;
        }

        #chapterNumber {
            text-align: center;
        }

        #chapterNumber:focus {
            outline: none;
        }

        #chapterTitle:focus {
            outline: none;
        }

        .default {
            font-size: 22px; /* 设置字体大小为16px，根据需要进行调整 */
            color: #3636367c;
            transition: color 0.3s; /* 添加颜色过渡效果 */
        }

        .active {
            color: black;
            font-size: 22px; /* 设置字体大小为16px，根据需要进行调整 */
            transition: color 0.3s; /* 添加颜色过渡效果 */
        }
    </style>
</head>
<body>
<div id="chapterAdd">
    <div class="chapterNumber">
        <div>
            <span :class="isInputActive ? 'active' : 'default'">第</span>
            <input type="text" id="chapterNumber" v-model="chapter.chapterNumber" @focus="isInputActive = true"
                   @blur="isInputActive = false"
                   style="border: none;width: 40px;height: 40px;line-height: 40px;font-size: 22px;background-color: #f3f4f7;">
            <span :class="isInputActive ? 'active' : 'default'">章</span>
            <input type="text" id="chapterTitle" placeholder="请输入标题" v-model="chapter.chapterTitle"
                   @focus="isInputActive = true" @blur="isInputActive = false"
                   style="border: none;width: 400px;height: 40px;line-height: 40px;font-size: 22px;margin-left: 20px;background-color: #f3f4f7;">
        </div>
        <div>
            <el-row>
                <el-button round>存草稿</el-button>
                <el-button type="primary" round @click="dialogVisible = true">下一步</el-button>

                <el-dialog
                        title="提交确认"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <div style="width: 400px;height: 50px;display: flex;align-content: center;">
                        <p style="width: 100px">章节</p>
                        <p>第{{ chapter.chapterNumber }}章:&nbsp;{{ chapter.chapterTitle }}</p>
                    </div>
                    <div style="width: 350px;height: 50px;">
                        <p>发布时间:</p>
                        <template>
                            <el-radio v-model="chapter.radio" label="0">立即发布</el-radio>
                            <el-radio v-model="chapter.radio" label="1">定时发布</el-radio>
                            <div class="block" style="margin-top: 20px" v-if="chapter.radio==1">
                                <el-date-picker
                                        v-model="chapter.publishTime"
                                        type="datetime"
                                        placeholder="选择日期时间">
                                </el-date-picker>
                            </div>
                        </template>
                    </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false" style="margin-top: 30px">取 消</el-button>
                            <el-button type="primary" @click="onSubmit"style="margin-top: 30px">确 定</el-button>
                        </span>
                </el-dialog>
            </el-row>


        </div>
    </div>
    <textarea v-html="convertToLineBreaks(chapter.content)" v-model="chapter.content" class="custom-textarea" @keydown.enter.prevent="handleEnter"></textarea>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/chapter.js"></script>
<script src="../../js/index.js"></script>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script>

    new Vue({
        el: '#chapterAdd',
        data() {
            return {
                isInputActive: false,
                dialogVisible: false,
                userInfo: '',
                chapter: {
                    id: '',
                    chapterNumber: '',
                    chapterTitle: '',
                    content: '',
                    radio: '0',
                    publishTime: '',
                    wordCount: '',
                    authorId: '',
                    bookId: ''
                }
            }
        },
        computed: {},
        created() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('chapter') != null){
                // 获取 URL 中的参数
                const chapterParam = urlParams.get('chapter');
                // 解析参数为对象
                const chapter = JSON.parse(decodeURIComponent(chapterParam));
                this.chapter = chapter;
                this.chapter.radio = '0';
            }else {
                this.chapter.bookId = requestUrlParam('bookId')
            }
        },
        mounted() {
        },
        methods: {
            onSubmit() {
                if (this.chapter.chapterNumber.trim() === '') {
                    this.$message.error('请输入章节号');
                    return;
                }
                // 验证标题和章节不能为空
                if (this.chapter.chapterTitle.trim() === '') {
                    this.$message.error('请输入标题');
                    return;
                }
                // 验证内容最少500字
                if (this.chapter.content.length < 500) {
                    this.$message.error('内容最少需要500字');
                    return;
                }
                this.chapter.authorId = this.userInfo.id;
                this.chapter.wordCount = this.chapter.content.length;
                const chapter = {
                    ...this.chapter,
                }
                console.log(chapter.publishTime)
                chapter.content = chapter.content.replace(/\n/g, "<br>"); // 将换行符\n替换为<br>
                //发送请求
                addChapter(chapter).then(res => {
                    // console.log(res.data.data)
                    if (res.code === 200) {
                        this.$message.success('作品添加成功！')
                        this.form = {
                            chapterNumber: '',
                            chapterTitle: '',
                            content: '',
                            radio: '0',
                            publishTime: '',
                            wordCount: '',
                            authorId: '',
                        }
                        this.dialogVisible = false
                        window.localStorage.setItem("totalCount", res.data.data.totalCount);
                        this.goBack();
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            convertToLineBreaks(content) {
                return content.replace(/<br>/g, '\n');
            },
            handleEnter(event) {
                const textarea = event.target;
                const start = textarea.selectionStart;
                const value = textarea.value;

                if (event.key === 'Enter' && start === textarea.selectionEnd) {
                    event.preventDefault();
                    const indentation = ' '.repeat(7); // 16个空格等于2em的宽度
                    const newValue = value.slice(0, start) + '\n' + indentation + value.slice(start);
                    this.chapter.content = newValue;
                    textarea.value = newValue;
                    textarea.selectionStart = start + indentation.length + 1;
                    textarea.selectionEnd = start + indentation.length + 1;
                }
            },
            goBack() {
                window.parent.menuHandle({
                    id: '3',
                    url: '/author/page/book/list.html',
                    name: '图书管理'
                }, true)
            }
        },
    })
</script>
</body>
</html>